.videos-bg{
    position: relative;
    z-index: 1;
    background: black;
    height: 100vh;

}
.videos-bg ::-webkit-scrollbar {
    width: 0px !important;
    display: none;
  }
.title-bg{
    z-index: 3;
    position: absolute;
    top: 0rem;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw; 
    left: 0;
    height: 2.75rem;
    
}
.nav-back{
    padding-left: 0.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    position: absolute;
    left: 0;
    object-fit: contain;
    object-position: center;

}
.title{
    display: flex;
    align-items: center;  
    height: 2rem;
    background-color: rgba(0,0,0,0.3);
    border-radius: 1rem;
    color: #FFFFFF;
    line-height: 1.13rem;
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
    padding: 0 0.75rem;
    
}



.footer-drag-progress-bg,.footer-info-bg{
    z-index: 4;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    position: absolute;
    height: auto;
    padding:  0 1rem;
}
.footer-drag-progress-bg{
    padding:  0 0.75em;
    z-index: 3;
}
.footer-drag-progress-time-bg{
    margin-bottom: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}


.footer-drag-progress input:active,
.footer-drag-progress input:hover,
.footer-drag-progress input:focus,
.footer-drag-progress button:hover,
.footer-drag-progress button:focus {
    border: none;
    outline: none;
}



.footer-drag-progress{
    width: 100%;
    min-width: 10px;
    position: absolute;
    z-index: 0;
    display: inline-block;
    height: 2rem;
    bottom: calc(0rem + env(safe-area-inset-bottom));
    left: 0;
    right: 0;
    padding:  0 1rem;
    z-index: 4;
    padding-bottom: calc(1.15rem + env(safe-area-inset-bottom));
}
ion-range {
    --bar-background: #ffffff14;
    --bar-background-active: #ffffff !important;
    --bar-border-radius: 0rem;
    --bar-height: 0.19rem;
    --height: 2.19rem;
    --knob-size: 0.56rem;
    position: absolute;
    left: 0;
    right: 0;
    padding: 0;


  }
.footer-drag-progress .seekbar {
    z-index: 4;
    position: relative;
    width: 100%;
    height: 0.19rem;
    background: -webkit-linear-gradient(#ffffff, #ffffff) no-repeat, #FFFFFF14;/*设置左边颜色为#26a6d3，右边颜色为#d3d3d3*/
    background-size: 0% 100%;
    position: absolute;
    left: 0;
    bottom:1rem;
    width: 100%;
}


.footer-drag-progress input[type="range"] {
    -webkit-border-radius: 0.1rem;
    -moz-border-radius: 0.1rem;
    border-radius: 0.1rem;
    vertical-align: middle;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    cursor: pointer;
}

.footer-drag-progress input[type="range"]::-moz-range-track {
    vertical-align: middle;
    border-radius: 0.1rem;
    background-color: rgba(255, 255, 255, 1);
    -moz-appearance: none;
    background-color: white;
    height: 0.19rem;
    cursor: pointer;
}

.footer-drag-progress input[type="range"]::-moz-range-thumb {
    border-radius: 50%;
    height: 0.56rem;
    width: 0.56rem;
    background-color: white;
    border: 0;
}

.footer-drag-progress input[type="range"].light::-moz-range-thumb {
    box-shadow: 0 0 0.56rem 0.06rem white;
}

.footer-drag-progress input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border-radius: 50%;
    height: 0.56rem;
    width: 0.56rem;
    background-color: white;
    border: 0;
}

.footer-drag-progress input[type="range"].light::-webkit-slider-thumb {
    box-shadow: 0 0 0.56rem 0.03rem white;
}

.custom-video-controlbar input[type="range"]:active::-moz-range-track {
    background: white;
}
.current-time{
    font-size: 1.38rem;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 1.38rem;
    margin-right: 0.5rem;
    min-width: 2.95rem
}
.time-sep{
    font-size: 1rem;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.38rem;
    margin-right: 0.5rem;
}
.total-time{
    min-width: 2.95rem;
    font-size: 1.38rem;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.38rem;
}

.wrapper {
    display: flex;
    width: calc(100vw - 6.5rem);
    overflow: hidden;
    font-size: .88rem;
    color: #fff;
    margin-bottom: 1rem;
    line-height: 1rem;
}
.w-text{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* autoprefixer: off*/
    -webkit-box-orient: vertical;
    /* autoprefixer: on*/
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: justify;
    position: relative;

}
.w-text::before {
    content: '';
    height: calc(100% - 1rem);
    float: right;
}
.w-btn {
    float: right;
    clear: both;
    margin-left: 1rem;
    line-height: 1rem;
}
.video-desc-bg{
    width: calc(100vw - 5.2rem);
    margin-bottom: 1rem;
    font-size: 0.88rem;
    color: #FFFFFF;
    line-height: 1.25rem;
}
.video-desc{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* autoprefixer: off*/
    -webkit-box-orient: vertical;
    /* autoprefixer: on*/
    overflow: hidden;
    text-overflow: ellipsis;
}
.video-desc-btn{
    height: 1.25rem;
    font-size: 0.88rem;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 1.25rem;
}
.user-bg{
    display: flex;
    align-items: center;
}
.avatar{
 flex-shrink: 0;
 width: 2.75rem;
 height: 2.75rem;
 border: 0.03rem solid rgba(255, 255, 255, 0.6);
 border-radius: 1.4rem;
}
.user-info-bg{
    margin-left: 0.5rem;
    margin-right: 6rem;
    flex-grow: 1;
}
.user-info{
  display: flex;
  align-items: center;
  margin-bottom: 0.38rem;
}
.user-info-1{
    
    display: flex;
    align-items: center;
    font-size: 0.69rem;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 0.94rem;
  }
.name{
    font-size: 0.88rem;
    font-weight: bold;
    color: #FFFFFF;
}
.tag {
    font-size: 0.75rem;
    margin-left: 0.5rem;
    color: #FFFFFF;
}

.sep{
    display: inline-block;
    width: 0.03rem;
    height: 0.56rem;
    background: #FFFFFF;
    opacity: 0.5;
    margin: 0 0.31rem;
}
.btn{
    position: absolute;
    z-index: 4;
    height: 1.75rem;
    background: linear-gradient(90deg, #FFE14A 0%, #FFCA3B 100%);
    border-radius: 0.88rem;
    padding: 0 0.88rem;
    line-height: 1.75rem;
    font-size: 0.75rem;
    font-weight: bold;
    color: #0F0F0F;
    flex-shrink: 0;
    right: 1rem;
    bottom: 2.56rem;
}

.play-progress{
    height: 2.06rem;
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    display: flex;
    align-items: center;
}
.progress{
    width: 100%;
}
.play-progress-inner-bg{
    height: 0.06rem;
    background: rgba(255, 255, 255, 0.2);
    width: 100%;
    display: flex;
    align-items: center;
}
.play-progress-inner{
    height: 0.06rem;
    background: rgba(255, 255, 255, 0.3);
    width: 0%;
    display: inline-block;
}
.tool-bg{
    position: absolute;
    right: 0;
    background: transparent;
    bottom: 5.81rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 0.75rem;
    z-index: 4;
}
.btn-bg{
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 1rem;
}
.btn-icon{
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
}

.btn-title{
    margin-top: 0.25rem;
    font-size: 0.63rem;
    color: #FFFFFF;
    line-height: 0.88rem;
}
.loading-bg{
    width: 100%;
    position: absolute;
    padding: 1rem 0.75rem;
    bottom: 0rem;
    display: flex;
    align-items: center;
    
}
.hidden{
    display: none !important;
}
.loading{
    height: 0.13rem;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%);
    border-radius: 0.09rem;
    width: 100%;
    animation: mymove 0.8s linear 0.1s infinite;
    z-index: 4;
    animation-delay:0.1s;
    animation-fill-mode: infinite;
}
.guid{
    position: absolute;
    background-color: rgba(0,0,0,0.5);
    left: 0;
    top: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.guid-gif{
    width: 12.5rem;
    height: 12.5rem;
    object-fit: contain;
    object-position: center;
}
.guid-label{
    margin-top: 2rem;
    font-size: 1.13rem;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 3.75rem;

}
.transparent{
    opacity: 0;
}
@keyframes mymove {
    0% { opacity:0.1; transform: scale(0.0, 0.0);}
    50% { opacity:1; transform: scale(1.0, 1.0);}
    100% { opacity:0.1; transform: scale(0.0, 0.0);}
    }
@supports (bottom: env(safe-area-inset-bottom)) {
    .title-bg{
        top: calc(0rem + env(safe-area-inset-top));
    }    
    .footer-drag-progress-bg{   
        padding-bottom: calc(2rem +  env(safe-area-inset-bottom));
    }
    .play-progress,.footer-info-bg{   
        padding-bottom: calc(0rem +  env(safe-area-inset-bottom));
    }
    
    .tool-bg{
        bottom: calc(5.81rem + env(safe-area-inset-bottom)) ;
    }
    .loading{
        bottom: calc(0rem + env(safe-area-inset-bottom)) ;
    }
    .btn{
        bottom: calc(2.56rem + env(safe-area-inset-bottom)) ;
    }
    
  }
  @supports (bottom: constant(safe-area-inset-bottom)) {
    .title-bg{
        top: calc(0rem + constant(safe-area-inset-top));
    }    
    .play-progress,.footer-info-bg{
        padding-bottom: calc(0rem +  constant(safe-area-inset-bottom));
    }
    .footer-drag-progress-bg{
        padding-bottom: calc(2rem +  constant(safe-area-inset-bottom));
    }
    .tool-bg{
        bottom: calc(5.81rem + constant(safe-area-inset-bottom)) ;
    }
    .loading-bg{
        bottom: calc(0rem + constant(safe-area-inset-bottom)) ;
    }
   
    .btn{
        bottom: calc(2.56rem + constant(safe-area-inset-bottom)) ;
    }
  }
